<template>
  <div class="directory_box">
    <div class="main_box">
      <div class="title">
        <span>选择本地文件夹</span>
        <span @click="closeBox" class="iconfont icon-guanbi"></span>
      </div>
      <div class="directory_list">
        <div>
          <el-checkbox-group
            v-model="checkedDirectory"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(item, index) in directory"
              :label="item"
              :key="index"
              >{{ item }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="btn_box">
        <div class="determine" @click="determine">确定</div>
        <div class="addDir" @click="openDialog">添加文件夹</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      checkedDirectory: [],
      directory: [],
    }
  },
  computed: {
    ...mapGetters(["getDirectory"]),
  },
  created() {
    this.directory.push(...this.getDirectory)
    this.checkedDirectory.push(...this.directory)
  },
  methods: {
    closeBox() {
      this.$EventBus.$emit("showDirectory")
    },
    handleCheckedCitiesChange(value) {
      //   console.log(value)
    },
    async openDialog() {
      // 打开文件选择框
      const result = await this.$electron.remote.dialog.showOpenDialog({
        properties: ["openDirectory", "multiSelections"],
      })
      if (result) {
        let res = result.filter((item) => {
          let index = this.directory.findIndex((item2) => {
            return item2 == item
          })
          return index == -1
        })
        this.directory.push(...res)
        this.checkedDirectory.push(...res)
      }
    },
    // 点击确定按钮
    determine() {
      this.$store.dispatch("addDirectory", this.checkedDirectory)
      this.closeBox()
      this.$electron.ipcRenderer.send("scanFolder", this.checkedDirectory)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
.directory_box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .main_box {
    width: 300px;
    height: 350px;
    background: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.4);
    .title {
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgb(226, 225, 225);
      span:nth-child(1) {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
      }
      .icon-guanbi {
        color: rgb(112, 112, 112);
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        transition: 0.5s;
      }
      .icon-guanbi:hover {
        cursor: pointer;
      }
    }
    .directory_list {
      height: calc(100% - 100px);
      overflow-y: scroll;
      div {
        padding: 0px 10px;
        box-sizing: border-box;
        /deep/ .el-checkbox {
          display: block;
          height: 30px;
          line-height: 30px;
        }
        /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
          color: rgb(96, 98, 102);
        }
        /deep/ .el-checkbox__label {
          font-size: 13px;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .directory_list::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
      border-radius: 10px;
      background-color: #f5f5f5;
      opacity: 0;
    }

    /*定义滑块 内阴影+圆角*/
    .directory_list::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: rgb(216, 215, 215);
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    .directory_list::-webkit-scrollbar {
      width: 6px;
      background-color: #f5f5f5;
    }
    .btn_box {
      height: 50px;
      line-height: 50px;
      display: flex;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      border-top: 1px solid rgb(226, 225, 225);
      div {
        width: 80px;
        height: 30px;
        font-size: 13px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid rgb(226, 225, 225);
        transition: 0.5s;
      }
      .determine {
        border: none;
        background: #0c73c2;
        color: white;
        letter-spacing: 15px;
        padding-left: 15px;
        box-sizing: border-box;
      }
      div:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }
}
</style>
